<template>
    <video  ref="videos" class="video" v-if="previewVisible"  width="200" height="100" controls>
    <source :src="previewUrl" type="video/mp4" >
  </video>
  <el-upload v-if="type!='3d'" v-model:file-list="fileList" :show-file-list="uploadType" ref="uploadRef" :action="getAction()"
    list-type="picture-card" :accept="acceptType" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
    :before-upload="beforeAvatarUpload"  :timeout="60000"   :max-size="500 * 1024 * 1024"
    multiple :before-remove="beforeRemove" :on-success="handleAvatarSuccessRu" :limit="limit" :on-exceed="handleExceedFile"
    :data="{
      aid: 1,
    }">
    <el-icon>
      <Plus />
    </el-icon>
  </el-upload>
  <!-- 判断3d显示这个 -->
  <el-upload v-if="type=='3d'" v-model:file-list="fileList" :show-file-list="uploadType" ref="uploadRef" :action="getAction()"
    :accept="acceptType" :on-preview="handlePictureCardPreviewd" :on-remove="handleRemove"  :on-exceed="handleExceedFile"
    :before-upload="beforeAvatarUpload"  :timeout="60000"   :max-size="500 * 1024 * 1024"
    multiple :before-remove="beforeRemove" :on-success="handleAvatarSuccessRu" :limit="limit"
    :data="{
      aid: 1,
    }">
     <el-button type="primary" :disabled="props.removestate == 0">{{ t('common.上传') }}</el-button>
  </el-upload>


  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, getCurrentInstance } from 'vue'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'
const { proxy } = getCurrentInstance();
const emits = defineEmits(['UserFileUrl','DeleterFile']);
import { inject } from 'vue'
const CL: any = inject("$CL");
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();//登录国籍
const props = defineProps({
  /*文件上传数量*/
  limit: {
    type: Number,
    default: 1
  },
  fileLists: {
    type: Array,
    default: []
  },
  videoUrl: {
    type: String,
    default: ''
  },
  //上传文件类型
  type: {
    type: String,
    default: ''
  },
  //上传文件类型限制
  acceptType: {
    type: String,
    default: ''
  },
  //字段类型
  fieldType: {
    type: String,
    default: ''
  },
  //是否允许删除
  removestate: {
    type: Number,
    default: 1
  }
})
const fileList = ref([

])

const videos = ref(null);
const showDeleteButton = ref(false);
const previewVisible = ref(false)  // 是否显示预览
const previewUrl = ref()
const uploadRef = ref(null)

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const uploadType = ref(true)
// const videoKey = ref(0); // 用于强制重新渲染视频组件
watch(
  () => props.fileLists,
  (newUser, oldUser) => {
    fileList.value = newUser
  },
  { deep: true }
)
watch(
  () => props.videoUrl,
  (newUser, oldUser) => {
    if (newUser) {
      console.log(newUser, '视频回显视频回显视频回显视频回显视频回显视频回显');
      previewUrl.value = newUser;
      previewVisible.value = true;
      if (videos.value) {
        videos.value.load();  // 重新加载视频
      }
      // videoKey.value++

    }
  },
  { deep: true }
)


const handleRemove: UploadProps['onRemove'] = (uploadFile: any, uploadFiles: any) => {
  // previewVisible.value = false;
  // console.log('触发了');
  // previewUrl.value = '';
  console.log(uploadFile, uploadFiles,'uploadFilesuploadFiles==删除之后的数据');

  proxy.$emit('DeleterFile', { deleterList:uploadFiles, type: proxy.fieldType })
}

// const handleAvatarSuccessRu = (response: { url: string }, file: any, fileList: any) => {
//    proxy.$emit('DeleterFile', { url: response.url, type: proxy.fieldType })
// }
 // 超限判断 handleExceedFile
 const handleExceedFile= () => {
    ElMessage.warning(t('common.超过文件上传限制，请删除后重试'))
  }
const handleAvatarSuccessRu = (response: { url: string }, file: any, fileList: any) => {
  if (props.type == 'video') {
    uploadRef.value.clearFiles();
    uploadType.value = false
  }
  if (file.raw.type && file.raw.type.startsWith('video')) {
    previewVisible.value = true;
    previewUrl.value = "";
    previewUrl.value = file.url;  // 使用 FileReader 获取视频URL
    if (videos.value) {
      videos.value.load();  // 重新加载视频
    }
  } else {
    previewVisible.value = false;
    previewUrl.value = '';
  }
  // if(props.type!='video'){
     fileList.value = fileList
  // }
  console.log(response,'上传成功数据');

  emits('UserFileUrl', { url: response.url, type: proxy.fieldType })
}
const clearFiles = () => {
  uploadRef.value.clearFiles();
  previewVisible.value = false;
  previewUrl.value = '';
  if (videos.value) {
    videos.value.load();  // 重新加载视频
  }
}
const beforeRemove = () => {
  // 可以根据某些条件决定是否允许删除
  if (props.removestate == 0) {
    return false; // 如果是查看，阻止删除操作
  }

  return true; // 如果是编辑，新增，则允许删除
}
let typeArrtp = [
  'image/jpg',
  'image/jpeg',
  'image/png',
]
let typeArrsp = [
  'video/mp4',
  'video/avi',
  'video/mvb',
  'video/rmvb',
  'video/quicktime'

]
let typeArr3d = [
  'glb',
  'dae'
]

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: { type: string; size: number }) => {
  if (props.removestate == 0) {
    return false
  }
  if (props.type == 'video') {
    uploadType.value = true
  }
  console.log(rawFile, rawFile.size / 1024 / 1024, 'rawFile.typerawFile.type');
  if (props.type == 'video') {
    if (typeArrsp.indexOf(rawFile.type) < 0) {
      ElMessage.error(t('common.格式不正确,请上传mp4、mvb、AVI格式'))
      return false
    } else if (rawFile.size / 1024 / 1024 > 35) {
      ElMessage.error('文件大小超过35M')
      return false
    }
    return true;
  } else if(props.type=="3d"){
    let type=rawFile.name.split(".")[1]
    if (typeArr3d.indexOf(type) < 0) {
      ElMessage.error(t('common.格式不正确,请上传glb、dae格式'))
      return false
    }else if (rawFile.size / 1024 / 1024 > 100) {
      ElMessage.error(t('common.文件大小超过100M'))
      return false
    }
  } else if(props.type=="360"){
    if (typeArrtp.indexOf(rawFile.type) < 0) {
      ElMessage.error(t('common.格式不正确,请上传jpg,jpeg,png格式'))
      return false
    }else if (rawFile.size / 1024 / 1024 > 30) {
      ElMessage.error(t('common.文件大小超过30M'))
      return false
    }
  }else {
    if (typeArrtp.indexOf(rawFile.type) < 0) {
      ElMessage.error(t('common.格式不正确,请上传jpg,jpeg,png格式'))
      return false
    }else if (rawFile.size / 1024 / 1024 > 7) {
      ElMessage.error(t('common.文件大小超过7M'))
      return false
    }
    //  isible.value = true;
  }
}
//         previewUrl.value = file.url;  // 使用 FileReader 获取视频URL
//       } else {
//         previewVisible.value = false;
//         previewUrl.value = '';
//       }

// }
const handlePictureCardPreviewd: UploadProps['onPreview'] = (uploadFile: { url: any }) => {
  console.log(uploadFile,'uploadFileuploadFile');
  dialogVisible.value = false
}
// const deleteVideo = (index) => {
//   this.videos.splice(index, 1);
// }
// const handleMouseOver = () => {
//   // this.videos[index].showDeleteButton = true;
//   console.log('鼠标进入');
//   showDeleteButton.value=true

// }
// const handleMouseLeave = () => {
//   console.log('鼠标移除');
//   showDeleteButton.value=false

// }
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}
const getAction = () => {
  return import.meta.env.VITE_BASE_URL + "/?s=ApiImageupload/uploadImg";
};
// 显式导出方法
defineExpose({
  clearFiles
});
</script>
<style lang="scss" scoped>
.video {
  // margin-top: -60px;
  margin-right: 10px;
  width: 200px; /* 填满父容器 */
  height: 140px; /* 高度自动调整，保持比例 */
  // max-width: 800px; /* 最大宽度限制 */
  // margin: 0 auto; /* 水平居中 */
  border-radius: 8px; /* 圆角效果 */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 阴影 */
  // object-fit: cover; /* 保持比例填满容器 */
}
/* el-upload附件列表框去除'按 delete 键可删除'提示 */
:deep(.el-upload-list__item .el-icon-close-tip) {
  display: none !important;
}
:deep(.el-upload-list__item.is-success:focus:not(:hover) .el-icon--close-tip) {
  display: none !important;
}
:deep(.el-upload-list__item-file-name) {
  width: 100px !important;
}

</style>
